import Taro, { getCurrentInstance } from "@tarojs/taro";
import { useState, useEffect } from "react";
import { View, Image, Swiper, SwiperItem } from "@tarojs/components";
import { AtFab, AtActionSheet, AtActionSheetItem } from "taro-ui";
import Header from "@/components/header";
import Return from "@/components/Return";
import { getActivityInfo, register } from "@/api/application/volunteer";
import "taro-ui/dist/style/components/fab.scss";
import "taro-ui/dist/style/components/action-sheet.scss";
import css from "./index.module.less";

export default function ActivityDetail() {
  const router = getCurrentInstance().router.params;
  const { id, activityState } = router;

  //用户信息
  const [userInfo, setUserInfo] = useState({});
  //志愿活动信息
  const [activityInfo, setActivityInfo] = useState({});
  //是否报名
  const [isRegister, setIsRegister] = useState(0);
  //报名提示
  const [registerTip, setRegisterTip] = useState(false);

  useEffect(() => {
    Taro.getStorage({
      key: "userInfo",
      success: function (a) {
        setUserInfo(a.data);
        getActivityInfo(id, a.data.partyId).then(res => {
          if (res.code === 200) {
            setActivityInfo(res.data);
            setIsRegister(res.data.isRegister);
          }
        });
      }
    });
  }, []);

  const handleDownload = (e, url) => {
    Taro.downloadFile({
      url,
      success(file) {
        Taro.openDocument({
          filePath: file.tempFilePath,
          success: function (res) {
            console.log("打开文档成功", res);
          }
        });
      }
    });
  };

  const signUp = () => {
    register(userInfo.partyId, id).then(res => {
      if (res.code === 200) {
        setIsRegister(1);
        tipOnCancel();
      }
    });
  };

  const openTip = () => {
    if (isRegister) {
      console.log(isRegister);
    } else {
      setRegisterTip(true);
    }
  };

  const tipOnCancel = () => {
    setRegisterTip(false);
  };

  return (
    <View className={css.home}>
      <Header message='志愿活动' left='140px' />
      <Return />

      <View className={css.detail}>
        <View className={css.title}>{activityInfo.title}</View>
        <View className={css.info}>
          <View className={css.nameAndOrg}>
            {activityInfo.sponsorName}&nbsp;&nbsp;&nbsp;
            {activityInfo.organizationName}
          </View>
          <View className={css.timeAndBrowse}>
            <View className='at-icon at-icon-clock'>
              &nbsp;{activityInfo.releaseTime}&nbsp;&nbsp;&nbsp;
            </View>
            <View className='at-icon at-icon-eye'>
              &nbsp;{activityInfo.readingVolume}
            </View>
          </View>
        </View>
        <View className={css.content}>
          <View className={css.text}>活动内容</View>
          {activityInfo.activityContent}
        </View>

        <View className={css.otherContent}>
          <View>组织人: {activityInfo.activityContact}</View>
          <View>联系方式: {activityInfo.contactNumber}</View>
          <View>活动地点: {activityInfo.activityLocation}</View>
          <View>集合地点: {activityInfo.meetingPlace}</View>
          <View>集合时间: {activityInfo.activityTime}</View>
          <View>报名截止时间: {activityInfo.registrationDeadline}</View>
        </View>
        <View className={css.image}>
          {activityInfo.imgAttachList === undefined ||
            activityInfo.imgAttachList.length === 0 ? (
            <></>
          ) : (
            <Swiper
              indicatorColor='#999'
              indicatorActiveColor='#333'
              indicatorDots
              autoplay
            >
              {activityInfo.imgAttachList.map(item => (
                <SwiperItem key={item.id}>
                  <Image src={item.path} />
                </SwiperItem>
              ))}
            </Swiper>
          )}
        </View>

        <View className={css.bottomInfo}>
          来源 : {activityInfo.activitySource}&nbsp;&nbsp; 编辑 :{" "}
          {activityInfo.sponsorName}&nbsp;&nbsp; 审核 :{" "}
          {activityInfo.reviewerName}&nbsp;&nbsp;
        </View>
        <View className={css.extraFiles}>
          附件 :
          {activityInfo.fileAttachList === undefined ||
            activityInfo.fileAttachList.length === 0
            ? " 无"
            : activityInfo.fileAttachList.map(item => (
              <View key={item.id} onClick={e => handleDownload(e, item.path)}>
                {item.name.length > 20 ? item.name.slice(0, 20) : item.name}
              </View>
            ))}
        </View>
      </View>

      <View className={css.btn}>
        {activityState === undefined || activityState > 0 ? (
          <AtFab
            className={`${css.signUpBtn} ${isRegister ? css.cancelBtn : css.signUpBtn
              }`}
            onClick={openTip}
          >
            {isRegister ? "已报名" : "报名"}
          </AtFab>
        ) : (
          <></>
        )}
      </View>

      <AtActionSheet
        isOpened={registerTip}
        title='是否报名该志愿活动, 报名后无法取消'
        cancelText='取消'
        onCancel={tipOnCancel}
        onClose={tipOnCancel}
      >
        <AtActionSheetItem onClick={signUp}>报名</AtActionSheetItem>
      </AtActionSheet>
    </View>
  );
}
